<template>
  <div class="app-info">
      <header class="mint-header"><div class="mint-header-button is-left"><a  class="router-link-active " @click="ff"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-back"></i></span> <label class="mint-button-text"></label></button></a></div> <h1 class="mint-header-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;  font-size:18px;">仁医产品详情</font></font></h1> <div class="mint-header-button is-right"><button class="mint-button mint-button--default mint-button--normal"><span class="mint-button-icon"><i class="mintui mintui-more"></i></span> <label class="mint-button-text"></label></button></div></header>
      <mt-swipe :auto="5000">
         <mt-swipe-item v-for="item in list" :key="item.id">
            <img :src="item.list1" alt="">
         </mt-swipe-item>
         <mt-swipe-item v-for="item in list" :key="item.id">
            <img :src="item.list2" alt="">
         </mt-swipe-item>
         <mt-swipe-item v-for="item in list" :key="item.id">
            <img :src="item.list3" alt="">
         </mt-swipe-item>
         </mt-swipe> 
         <div class="bor">
         <div class="container">
         <div v-for="item of list" :key="item.id" class="title"><span>{{item.title}}</span><img src="http://127.0.0.1:3000/img/biao1.png" alt=""></div>
         <div v-for="item of list" :key="item.id" class="price">￥{{item.price}}</div>
         <div class="cu">促销大礼包，买1000送200</div>
         </div>
         </div>
         <div class="bor" >
             <div class="container">
                <div  class="info"  ><p class="p2">功效：</p><span class="text"    @click="hand()" v-for="item of list" :key="item.id"  :class="{'yy':isshow}">{{item.info}}</span></div>
                 <div    class="info"><p class="p1">厂家：</p><span class="text1">广州白云山制药股份有限公司广州白云山制药总厂。</span></div>
             </div>
         </div>
         <div class="dd"></div>
         <div class="bor">
             <div class="container" >
                 <div class="instruct"> <p class="p2">用药须知：</p> <span class="text2"   @click="hand1()" :class="{'yy':isshow1}">治疗阳痿早泄配合固本回元口服液服用效果好</span></div> 
           </div>
         </div>
         <div class="bor">
             <div class="container" >
                 <div class="instruct"> <p class="p2">规格：</p> <span class="gg">50mg*20s</span></div> 
           </div>
         </div>
         <div class="bor">
             <div class="container" >
                 <div class="instruct"> <p class="p3">数量：</p> 
                 
                <numbox @getcount="getScount" :max="99"></numbox>
                </div> 
           </div>
         </div>
          <div class="dd"></div>
      <div class="mint-tabbar is-fixed">
              <a class="mint-tab-item color3" >
                  <div class="mint-tab-item-label ">
                     
                     <router-link to="/home/cart"><div class="mui-icon-extra mui-icon-extra-cart  gw"><span class="mui-badge">{{$store.getters.getAllCount}}</span></div></router-link>
                </div>
              </a> 
              <a class="mint-tab-item color2" >
                  <div class="mint-tab-item-label ">
                      <font style="vertical-align: inherit;">
                          <font style="vertical-align: inherit;color:#fff" @click="addCart" >加入购物车</font>
                          </font>
                  </div>
              </a> 
              <a class="mint-tab-item  color1"> 
                  <div class="mint-tab-item-label ">
                      <font style="vertical-align: middle;">
                          <font style="vertical-align: middle;color:#fff">立即提交</font>
                    </font>
                 </div>
              </a>
       </div>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      </div>    
</template>
<script>
import numbox from "../infonum.vue"
    export default{
        data(){
            return{lid:this.$route.query.id,list:[],isshow:"false",isshow1:"false",val:1,show:1,scount:1,cartList:[],goodsinfo:{}}
            },
            methods:{
                getList(){
                    var url="http://127.0.0.1:3000/getnanxinglist1?lid="+this.lid;
                    this.$http.get(url).then(result=>{
                    this.list=result.body;
                   })},
                   hand(){
                       this.isshow=!this.isshow;
                   },
                   
                   hand1(){
                       this.isshow1=!this.isshow1;
                   },
                   
                   getScount(count){
                     this.scount=count;
                    
                     },
                     ff(){
                          history.go(-1)
                      },
                      addCart(){
                          var goodsinfo={
                              id:parseInt(this.lid),
                              count:this.scount,
                              price:this.list[0].price,
                              selected:true
                          };
                           this.$store.commit("addToCar",goodsinfo)
                      }
                     },
                     created(){this.getList()},
                         components:{
                             "numbox":numbox
                         }
                         
                        }
</script>
<style>


div.app-info  div.container{
    width: 90%;
    margin: 0 auto;
    color: #666;
    font-size: 14px;
    
}
div.app-info  .bor{
     border-top: 1px solid #ddd;
     
}
div.app-info div.mint-swipe{
    width: 320px;
    height: 300px;
    margin: 0 auto;
}

div.app-info .title{
    color: #666;
    margin-top: 10px;
 
}
div.app-info .title img{
    position: relative;
    top: 3px;
    left: 5px;
    width: 58px;
    height: 17px;
}
div.app-info .price{
   
    margin-top:20px; 
    font-size: 20px;
   color: #ff6464;
}
div.app-info .cu{
   
    margin-top:20px; 
    font-size: 14px;
   color: #ff6464;
   margin-bottom: 20px;
}
div.app-info  .info{
    margin-top: 10px;
   
}
div.app-info  .text{
    display: inline-block;
    width: 80%;
   margin-left: 50px;
}
div.app-info  .text2{
    display: inline-block;
    width: 80%;
   margin-left: 70px;
}
div.app-info  .text1{
   display:inline-block;
    width: 80%;
    height: 46px; 
    white-space: wrap;
    margin-left: 10px;
}
div.app-info .dd{
    height: 20px;
    width: 100%;
    background: rgb(245, 241, 241);
}
div.app-info .p1{
    position: relative;
    top: -22px;
    display: inline-block;
    color: #666;
}
div.app-info .p2{
    position: absolute;
    display: inline-block;
    color: #666;
}
div.app-info .p3{
   position: relative;
 
    display: inline-block;
    color: #666;
}
div.app-info .instruct{
    margin: 15px 0;
    color: #666;
    vertical-align: middle;
}

.yy{
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
}
.gg{
    position: relative;
    top: -5px;
    display: inline-block;
    width: 90px;
    height: 30px;
    color: #fff;
    border: 1px solid #ff6464;
    border-radius: 10px;
    background: #ff6464;
    margin-left: 50px;
    text-align: center;
    line-height: 30px;
}
div.app-info  div.mint-tabbar{
    height: 56px;
}
div.app-info  div.mint-tab-item-label{
    line-height: 40px;
    font-size: 15px;
}
.color1{
  background-color:#f53b10;
}
.color2{
    background-color:#fba744;
}
.color3{
    background: rgb(221, 207, 207);
}
div.mui-icon-extra-cart{
    height: 30px;
}
span.mui-badge{
    position: relative;
    background:#f53b10;
    color: #fff;
    top: -15px; 
    left: -3px;
}
div.gw{
    position: relative;
    left: 5px;
    top: 5px;
}
 div.app-info div.mint-swipe{
     height: 240px;
 }
  div.app-info div.mint-swipe  img{
     height: 220px;
      width: 100%;
  }
  
 </style>

